<template>
  <el-aside style="width:220px;display:inline-block;height:100%;background: #393F49;">
    <el-menu
      background-color="#393F49"
      text-color="#a3aeb7"
      mode="vertical"
      :default-active="$route.path"
      active-text-color="#fff"
      router
    >
      <el-menu-item
        :index="route.path"
        v-for="(route, index) in routes"
        :key="index"
      >
        <i :class="['menu-icon',route.icon, $route.path===route.path?'isActive':'']"></i>
        <span slot="title"> {{route.name}}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>


<script>
import main from '../assets/images/preview/symbols-jhmbgl.png'
import system from '../assets/images/preview/symbols-xtgl.png'
import journal from '../assets/images/preview/symbols-rzgl.png'
import joggle from '../assets/images/preview/symbols-cplxgl.png'
import role from '../assets/images/preview/symbols-jsgl.png'
import user from '../assets/images/preview/symbols-yhgl.png'
import supervise from '../assets/images/preview/symbols-ddgl.png'
import external from '../assets/images/preview/symbols-grxx.png'
import index from '../assets/images/preview/symbols-sy.png'


export default {
  data() {
    return {};
  },
  computed: {
    routes() {
      const roleId = localStorage.getItem('roleId')
      const permissionList = JSON.parse(localStorage.getItem('permissionList'))

      const filtered = this.$router.options.routes.filter(route => {
        // if (route.role && route.role !== roleId) {
        //   console.log(route, roleId)
        //   return false
        // } else if (route.role) {
        //   return true
        // }
        // if (route.sider === undefined) {
        //   return true
        // }
        if (route.id === 0) {
          return true
        }
        if (permissionList.some(item => item.cPermissionId === route.id)) {
          return true
        }
      })
      return filtered
    }
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.menu-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  &.index {
    background-image: url(../assets/images/preview/symbols-sy.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-sy.png);
    }
  }
  &.main {
    background-image: url(../assets/images/preview/symbols-jhmbgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-jhmbgl.png);
    }
  }
  &.system {
    background-image: url(../assets/images/preview/symbols-xtgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-xtgl.png);
    }
  }
  &.process {
    background-image: url(../assets/images/preview/symbols-jhfzgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-jhfzgl.png);
    }
  }
  &.notification {
    background-image: url(../assets/images/preview/symbols-noti.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-noti.png);
    }
  }
  &.journal {
    background-image: url(../assets/images/preview/symbols-rzgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-rzgl.png);
    }
  }
  &.joggle {
    background-image: url(../assets/images/preview/symbols-cplxgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-cplxgl.png);
    }
  }
  &.role {
    background-image: url(../assets/images/preview/symbols-jsgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-jsgl.png);
    }
  }
  &.user {
    background-image: url(../assets/images/preview/symbols-yhgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-yhgl.png);
    }
  }
  &.supervise {
    background-image: url(../assets/images/preview/symbols-ddgl.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-ddgl.png);
    }
  }

  &.external {
    background-image: url(../assets/images/preview/symbols-grxx.png);
    &.isActive {
      background-image: url(../assets/images/preview/symbols-grxx.png);
    }
  }
}
</style>


<style scoped>
span {
  color: #a3aeb7;
  padding-left: 10px;
}

a {
  text-decoration: none;
}
.logo:hover {
  cursor: pointer;
}

.el-col-3 {
  width: 100%;
}

.el-menu {
  min-height: 100%;
  z-index: 10;
  border: none;
}

.el-menu-item {
  height: 48px;
  line-height: 48px;
  text-align: left;
}

.el-menu-item span {
  font-size: 20px;
}

.iconfont {
  color: #a3aeb7;
}

.el-menu-item.is-disabled {
  opacity: 1;
}

.el-menu-item i {
  color: #a3aeb7;
  text-align: left;
}

.el-tabs__nav-wrap {
  position: relative;
  left: 113px;
  top: 79px;
  height: 500px;
}

.el-tabs--left,
.el-tabs--right {
  height: 600px;
}

.el-tabs--left .el-tabs__item.is-left {
  height: 120px;
}

.el-menu-item.is-active {
  background: #167cc7 !important;
}
.el-menu-item.is-active i {
  color: #fff;
}
.el-menu-item.is-active span {
  color: #fff;
}
</style>
